<template>
    <div class="enterprise-aside fr">
        <div class="logo-block" align="center">
            <img src="../../../assets/images/enterpriseCenter/enterprise_logo.png" alt="">
            <dl>
                浙江海洋大学
                <dt class="edit-a btn" @click="goPage(item.pathName)">
                    <img src="../../../assets/images/common/com_fabu.png" alt="">
                    编辑企业资料
                </dt>
                <dt>最近登录：1019-05&nbsp13:55</dt>
            </dl>
        </div>
        <ul class="menu-block">
            <li v-for="(item, index) in menuList" :key="index+'me'" @click="goPage(item.pathName)">
                <img :src="currentPath===item.pathName?item.srcActive:item.src" alt="">
                <p :class="currentPath===item.pathName?'active':''">{{item.name}}</p>
            </li>
        </ul>
        <ul class="tab-block">
            <li v-for="(item, index) in tabList" :key="index+'tab'" @click="goPage(item.pathName)">
                <img :src="currentPath===item.pathName?item.srcActive:item.src" alt="">
                <span :class="currentPath===item.pathName?'active':''">{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "EnterpriseAside",
        data() {
            return {
                menuList: [
                    {
                        src: require('@/assets/images/enterpriseCenter/side_fabu_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_fabu_s.png'),
                        name: '发布职位',
                        pathName: 'publish-job'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_home_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_home_s.png'),
                        name: '公司主页',
                        pathName: 'enterprise-home'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_Search_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_Search_s.png'),
                        name: '人才搜索',
                        pathName: 'enterprise-home'
                    },
                ],
                tabList: [
                    {
                        src: require('@/assets/images/enterpriseCenter/side_qiye_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_qiye_s.png'),
                        name: '企业中心',
                        pathName: 'enterprise-center'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_zhiwei_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_zhiwei_s.png'),
                        name: '职位管理',
                        pathName: 'job-manage'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_jianli_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_jianli_s.png'),
                        name: '简历管理',
                        pathName: 'resume-manage'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_vip_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_vip_s.png'),
                        name: 'VIP服务'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_setup_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_setup_s.png'),
                        name: '账号设置',
                        pathName: 'edit-enterprise-data'
                    },
                    {
                        src: require('@/assets/images/enterpriseCenter/side_id_n.png'),
                        srcActive: require('@/assets/images/enterpriseCenter/side_id_s.png'),
                        name: '身份认证'
                    }
                ],
                currentPath: '',
            }
        },
        methods: {
            goPage(name) {
                this.$router.push({name: name})
            }
        },
        watch:{
            $route(to,from){
                this.currentPath = this.$route.name;
            }
        },
        mounted() {
            this.currentPath = this.$route.name;
        }
    }
</script>

<style scoped lang="less">
    .enterprise-aside {
        width: 310px;
        .logo-block {
            width: 100%;
            height: 376px;
            padding: 32px 44px;
            box-sizing: border-box;
            background: #fff;
            dl {
                margin-top: 14px;
                font-size: 18px;
                color: #333333;
                text-align: center;
                dt {
                    margin-top: 11px;
                    font-size: 12px;
                    color: #666666;
                }
                .edit-a {
                    font-size: 14px;
                    color: @btn-color;
                }
            }
        }
        .menu-block {
            width: 100%;
            height: 110px;
            margin-top: 20px;
            padding: 21px 38px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            background: @block-bg-color;
            color: #CCCCCC;
            li {
                width: 58px;
                text-align: center;
                cursor: pointer;
                p {
                    margin-top: 6px;
                    font-size: 13px;
                }
            }
        }
        .tab-block {
            width: 100%;
            height: 304px;
            margin: 23px 0;
            background: @block-bg-color;
            padding: 5px 41px;
            box-sizing: border-box;
            li {
                height: 49px;
                line-height: 49px;
                font-size: 15px;
                img {
                    margin-right: 24px;
                    cursor: pointer;
                }
                span {
                    cursor: pointer;
                }
            }
        }
    }
</style>